<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <br>
    ----------<button onclick="stop()">暂停</button>
    最大同屏遮罩数<input id="znum" value="5"> <br>
    遮罩宽<input id="zwid" value="50"> <br>
    遮罩高<input id="zhei" value="30"> <br>
    速度(1-1000)<input id="zspd" value="1000"> <br>
    <a id = "num">1</a> <br>
    <a id = "num2">1</a> <br>
 
    这是一张图片 
    
    <div style="position: relative;">
    <img  id="goupiimg" style="border:11px solid #0c1d7c;position:absolute;top:0px;left:0px;" height=1063 width=600 src="./goupi.png" width="28" height="30"  alt="" title="这是一张图片">
    <canvas   id="myCanvas" width=1134 height=2010 style="border:11px solid #d3d3d3;position:absolute;top:-0px;left:0px;">

</div>
<img  id="goupiimg2" height=106 width=60 src="./goupi2.png" width="28" height="30"  alt="" title="这是一张图片(1M等待加载完毕)">

<script>
    window.setInterval(showalert, 1); //每秒50帧
    var gpimg=document.getElementById("goupiimg2");

    var c=document.getElementById("myCanvas");
    var ctx=c.getContext("2d");
    var rects = new Array();
    var max = 30;
    var nownum = 0;
    var isstop = 0;
    function stop(){
        if(isstop){
            isstop = 0;
            return;
        }
        isstop = 1;
    }
    function showalert(){
        if(isstop){

            return;
        }
        document.getElementById("num2").innerHTML =  Number(document.getElementById("num2").innerHTML) +1   ;

        // alert(1);
        var speed =  1000/Number(document.getElementById("zspd").value);
        if (speed < 1){
            speed = 1;
        }
         nownum += 1;
        if(nownum >= speed){
            nownum = 0;
        }
        else{
            return;
        }

        var width = Number(document.getElementById("zwid").value);
        var height = Number(document.getElementById("zhei").value);
        var znum = Number(document.getElementById("znum").value);



        document.getElementById("num").innerHTML =  Number(document.getElementById("num").innerHTML) +1   ;
        
        ctx.clearRect(0,0,c.width,c.height);  
            

        for (let index = 0; index < znum; index++) {
            // if(rects.length > max ){
            //     var recttemp =  rects[0];
            //     // ctx.clearRect(recttemp.x,recttemp.y,width,height);  
            //       rects.shift();
            // }
            var pointx = Math.ceil(Math.random()*600);
            var pointy =Math.ceil(Math.random()*1000);

            var rect = new Object();
            rect["x"] =  pointx;
            rect.y = pointy;
            rects.push(rect);
            //   ctx.drawImage(gpimg,pointx/10,pointy/10,width/10,height/10,pointx,pointy,width,height);
              ctx.drawImage(gpimg,pointx/1,pointy/1,width/1,height/1,pointx,pointy,width,height);

            //   ctx.drawImage(gpimg,pointx,pointy,width,height,22,22,100,100);

        }

        
    }



</script>



</body>
</html>